<!--/*
 * Author: Christian Petry
 * Homepage: www.petry-christian.de
 *
 * License: MIT
 * Copyright (c) 2014 Christian Petry
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
 * and associated documentation files (the "Software"), to deal in the Software without restriction,
 * including without limitation the rights to use, copy, modify, merge, publish, distribute, 
 * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is 
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or 
 * substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
 * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
 * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
 * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 
 * OTHER DEALINGS IN THE SOFTWARE.
 */
-->

<html>

<head>
	<title>TextureGenerator-Online</title>
	<script src="javascript/extern/jquery-2.1.1.min.js"></script>
	<script src="javascript/extern/jquery-ui.min.js"></script>
	
	<!-- Colpick -->
	<script src="colpick-2.0.2/js/colpick.js" type="text/javascript"> </script>
	<link rel="stylesheet" href="colpick-2.0.2/css/colpick.css" type="text/css"/>

	<link type="text/css" rel="stylesheet" href=".opensans700.css">

	

	<link type="text/css" rel="stylesheet" href="./css/style.css"></link>
	<link type="text/css" rel="stylesheet" href="./css/tiles.css"></link>
	<link type="text/css" rel="stylesheet" href="./css/gradient.css"></link>
	<link type="text/css" rel="stylesheet" href="./css/terrain.css"></link>
	<link type="text/css" rel="stylesheet" href="./css/textiles.css"></link>

	<meta charset="utf-8">
	<meta name="description" content="Online Texture Generator FREE! Create a Texture directly inside your browser! No Uploads required, completely client-based">
	<meta name="author" content="Christian Petry">
	<meta name="language" CONTENT="english">
	<meta name="keywords" content="Texture,Generator,TextureGenerator,Online,Brick,Checker,Perlin Noise,Noise,Terrain,Shadowmap,Gradient,Tiles,cpetry,github,Texture-Generator,Javascript">
	<meta name="date" content="2014-09-26">
	<meta name="page-topic" content="Dienstleistung">
	<meta name="robots" content="index,follow">
	<meta http-equiv="reply-to" content="petry_christian@web.de">
</head>

<body>
	<!-- space to top -->
	<div style="min-height:10px"></div>
	
	<br/>
	<div align="center" >
		<img width="200" height="200" src="images/logo.png" /><br/>
	</div>
	
	<div style="min-height:10px"></div>

	<div class="container">		
	
		<table><tr>
			<td style="vertical-align:bottom;">
				<div class="preview">
					<canvas id="texture" style="display:none;" width="512" height="512"> </canvas>
					<div width=512 height=512>
						<canvas id="texture_preview" width="512" height="512" style="border:1px solid #000000;">> </canvas>
					</div>
				</div>
			</td>
			
			<td style="vertical-align:top">

				<div class="type_chooser">
					<div>
						Texture type
					</div>
					<div style="min-height:20"></div>
					<div class="type_selector">
						<img class="texture_type" title="Brick" id="type_Brick" src='./types/brick.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Clouds" id="type_Clouds" src='./types/clouds.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Checker" id="type_Checker" src='./types/checker.png' onclick="showType($(this).attr('id'))" />
						<!--<img class="texture_type" title="Under Construction" id="type_Celular" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Under Construction" id="type_Falloff" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />-->
						<img class="texture_type" title="Gradient" id="type_Gradient" src='./types/gradient.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Under Construction" id="type_Marble" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="PerlinNoise" id="type_PerlinNoise" src='./types/perlinnoise.png' onclick="showType($(this).attr('id'))" />
						<br />
						<img class="texture_type" title="Under Construction" id="type_Splat" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Under Construction" id="type_Stucco" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Terrain" id="type_Terrain" src='./types/terrain.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Textiles" id="type_Textiles" src='./types/textiles.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Tiles" id="type_Tiles" src='./types/tiles.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Wood" id="type_Wood" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />
						
						<br />
						<!--<img class="texture_type" title="Under Construction" id="type_Waves" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />
						<img class="texture_type" title="Under Construction" id="type_Wood" src='./types/under_construction.png' onclick="showType($(this).attr('id'))" />-->
						
					</div>
				</div>
		
				<div class="settings">

					<!-- Brick -->
					<div class="type_settings" id="Brick">
						<table align="center">
						<tr class="option_settings_head">
							<td colspan="3">
								Brick Settings
							</td>
						</tr>

						<tr class="suboption_settings">
							<td>
								Pattern
							</td>
							<td colspan=2 style="max-width: 180px;" align="center">
								<input type="radio" name="brick_pattern" onchange="updateTexture();" value="straight" > 
									<img src="images/brick_straight.png" />
	    						<input type="radio" name="brick_pattern" onchange="updateTexture();" value="block_wide" >
	    							<img src="images/brick_block_wide.png" />
	    						<input type="radio" name="brick_pattern" onchange="updateTexture();" value="block">
	    							<img src="images/brick_block.png" /><br/>
	    						<!--<input type="radio" name="brick_pattern" onchange="updateTexture();" value="block_lines"> block_lines
	    						<input type="radio" name="brick_pattern" onchange="updateTexture();" value="star"> star-->
	    						<input type="radio" name="brick_pattern" onchange="updateTexture();" value="circle" > 
	    							<img src="images/brick_circle.png" />
	    					
	    						<input type="radio" name="brick_pattern" onchange="updateTexture();" value="edges" checked>
	    							<img src="images/brick_edges.png" />
	    						<!--<input type="radio" name="brick_pattern" onchange="updateTexture();" value="rose"> rose-->
							</td>
						</tr>	
						<tr class="suboption_settings">
							<td >
								Size
							</td>
							<td align="center" colspan="2">
								x <input type="number" id="brick_x" onchange="updateTexture();" style="width:35px;" min="1" value="6" max="50" />
								y <input type="number" id="brick_y" onchange="updateTexture();" style="width:35px;" min="1" value="6" max="50" />
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td style="width:30%;">
								Brick
							</td>
							<td>
								<div class="colorpicker" id="brick_color"></div>
							</td>	
						</tr>
						<!-- Gradient for Brick -->
						<tr class="suboption_settings" >
							<td style="text-align:left">
								<label>
									<input type="checkbox" id="BrickGradient" onchange="enableBrickGradient();" checked> 
									Gradient 
									<script>
										function enableBrickGradient(){
											if($('#BrickGradient').prop('checked')){
									    		$('.brick_gradient_option').show();
									    		updateTexture();
									    	}
									    	else{
									    		$('.brick_gradient_option').hide();
									    		updateTexture();
									    	}
										};
									</script>
								</label>
							</td>

							<td class="brick_gradient_option">
								<div class="colorpicker" id="brick_gradient_color"></div>
							</td>
							<td class="brick_gradient_option" align="center">
								Size <input type="number" id="brick_gradient" onchange="updateTexture();" 
								style="width:45px;" min="0" value="3" max="100" />
							</td>

						</tr>
						<tr class="suboption_settings">
							<td>
								Grout
							</td>
							<td>
								<div class="colorpicker" id="brick_grout_color"></div>
							</td>
							<td align="center">
								Size <input type="number" id="brick_grout_width" onchange="updateTexture();" 
								style="width:35px;" min="0" value="6" max="50" />
							</td>
							
						</tr>
						
						
									
						
						</table>
					</div>

					<!-- Checker -->
					<div class="type_settings" id="Checker">
						<table align="center">
						<tr class="option_settings_head">
							<td colspan="3">
								Checker Settings
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Color
							</td>
							<td>
								<div class="colorpicker" id="checker_color1"></div>
							</td>
							<td>
								<div class="colorpicker" id="checker_color2"></div>
							</td>
						</tr>

						<tr class="suboption_settings">
							<td>
								Count
							</td>
							<td >
								x <input type="number" id="checker_x" onchange="updateTexture();" style="width:35px;" min="1" value="6" max="50" />
							</td>
							<td>
								y <input type="number" id="checker_y" onchange="updateTexture();" style="width:35px;" min="1" value="6" max="50" />
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Percentage
							</td>
							<td>
								 <input type="number" id="checker_percentage" onchange="enableCheckerPercentage(); updateTexture();" step="1" style="width:45px;" min="0" value="100" max="100" />
									<script>
										function enableCheckerPercentage(){
											if($('#checker_percentage').val() < 100){
									    		$('#checker_seed_line').show();
									    	}
									    	else{
									    		$('#checker_seed_line').hide();
									    	}
										};
									</script>
							</td>
						</tr>
						<tr class="suboption_settings" id="checker_seed_line" style="display:none">
							<td>
								Seed
							</td>
							<td>
								 <input type="number" id="checker_seed" onchange="updateTexture();" style="width:45px;" min="1" value="1" max="1000" />
							</td>
						</tr>
						
						
						</table>
					</div>
					
					<!-- Clouds --> 
					<div class="type_settings" id="Clouds"> <!-- display:block -> Show default texture -->
						<table align="center">
						<tr class="option_settings_head">
							<td colspan="3">
								Clouds Settings
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Color
							</td>
							<td align="center">
								<div style="display:inline-block;" class="colorpicker" id="clouds_color1"></div>
								<div style="display:inline-block;" class="colorpicker" id="clouds_color2"></div>
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Scale
							</td>
							<td colspan=2>
								<input type="range" id="clouds_scale_slider" min="1" max="20" value="7" step="1"
									onchange="document.getElementById('clouds_scale').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="clouds_scale" 
									onchange="document.getElementById('clouds_scale_slider').value = this.value; updateTexture();"
									style="width:52px;" min="1" value="7" max="20" step="1"/>
							</td>
						</tr>
												
						<tr class="suboption_settings">
							<td>
								Detail
							</td>
							<td colspan=2>
								<input type="range" id="clouds_detail_slider" min="0" max="1" value="0.45" step="0.01"
									onchange="document.getElementById('clouds_detail').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="clouds_detail" 
									onchange="document.getElementById('clouds_detail_slider').value = this.value; updateTexture();"
									style="width:45px;" min="0" value="0.45" max="1" step="0.01" />
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Percentage
							</td>
							<td colspan=2>
								<input type="range" id="clouds_percentage_slider" min="0" max="1" value="0.6" step="0.01"
									onchange="document.getElementById('clouds_percentage').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="clouds_percentage" 
									onchange="document.getElementById('clouds_percentage_slider').value = this.value; updateTexture();"
									style="width:45px;" min="0" value="0.6" max="1" step="0.01" />
							</td>
						</tr>
						
						<tr class="suboption_settings" id="clouds_seed_line">
							<td>
								Seed
							</td>
							<td align="center">
								 <input type="number" id="clouds_seed" onchange="updateTexture();" style="width:45px;" min="1" value="1" max="1000" />
							</td>
						</tr>
						
						
						</table>
					</div>
					
					<!-- Gradient -->
					<div class="type_settings" id="Gradient">
						<div class="option_settings_head">
							Gradient Settings
						</div>
						<div class="gradient_gradient_preview"></div>
						<div class="slider_area_gradient">
							<hr class="slider_line_gradient" />
						</div>
						
						<div>
							<select id="gradient_type" onchange="updateTexture()">
								<option>linear</option>
								<option selected>radial</option>
							</select>
						</div>
					</div>
				
					<!-- Perlin Noise --> 
					<div class="type_settings" id="PerlinNoise"> <!-- display:block -> Show default texture -->
						<table align="center">
						<tr class="option_settings_head">
							<td colspan="3">
								Perlin Noise Settings
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Color
							</td>
							<td align="center">
								<div style="display:inline-block;" class="colorpicker" id="perlin_noise_color1"></div>
								<div style="display:inline-block;"class="colorpicker" id="perlin_noise_color2"></div>
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Type
							</td>
							<td>
								<select id="perlin_noise_type"
									onchange="updateTexture();">
									<option selected>PerlinNoise</option>
									<option>FractalNoise</option>
									<option>Turbulence</option>
								</select>
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Octaves
							</td>
							<td>
								<input type="range" id="perlin_noise_octaves_slider" min="1" max="10" value="6" step="1"
									onchange="document.getElementById('perlin_noise_octaves').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								 <input type="number" id="perlin_noise_octaves" 
								 onchange="document.getElementById('perlin_noise_octaves_slider').value = this.value; updateTexture();"
								 step="1" style="width:45px;" min="1" value="6" max="10" />
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Scale
							</td>
							<td colspan=2>
								<input type="range" id="perlin_noise_scale_slider" min="1" max="100" value="50" step="1"
									onchange="document.getElementById('perlin_noise_scale').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="perlin_noise_scale" 
									onchange="document.getElementById('perlin_noise_scale_slider').value = this.value; updateTexture();"
									style="width:52px;" min="1" value="50" max="100" step="1"/>
							</td>
						</tr>
												
						<tr class="suboption_settings">
							<td>
								Persistence
							</td>
							<td colspan=2>
								<input type="range" id="perlin_noise_detail_slider" min="0" max="1" value="0.5"  step="0.01"
									onchange="document.getElementById('perlin_noise_detail').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="perlin_noise_detail" 
									onchange="document.getElementById('perlin_noise_detail_slider').value = this.value; updateTexture();"
									style="width:45px;" min="0" value="0.5" max="1" step="0.01" />
							</td>
						</tr>
						
						<tr class="suboption_settings" id="perlin_noise_seed_line">
							<td>
								Seed
							</td>
							<td align="center">
								 <input type="number" id="perlin_noise_seed" onchange="updateTexture();" style="width:45px;" min="1" value="1" max="1000" />
							</td>
						</tr>
						
						
						</table>
					</div>
					
					<!-- Terrain --> 
					<div class="type_settings" id="Terrain"> <!-- display:block -> Show default texture -->
						<div class="option_settings_head" style="height:40px;">
							Terrain Settings
						</div>
						<table align="center">
						<!--<tr class="suboption_settings" style="text-align:center;min-height:25px">
							<td colspan="2" height="26">
								Type
								<select id="terrain_type" onChange="setTerrainType();">
									<option value="mountains" selected>Mountains</option>
									<option value="sand">Sand</option>
									<option value="tundra">Tundra</option>
								</select>
							</td>
						</tr>-->
						<tr class="suboption_settings">
							<td>Scale
								<input type="range" id="terrain_scale_slider" min="2" max="15" value="7" step="1"
									onchange="updateTexture();"
									style="width:45%;vertical-align:top;">
							</td>
							<td>Detail
								<input type="range" id="terrain_detail_slider" min="0.25" max="0.6" value="0.45" step="0.01"
									onchange="updateTexture();"
									style="width:45%;vertical-align:top;">
							</td>
						</tr>
						<tr class="suboption_settings">
							
							<td >Mountains
								<input type="range" id="terrain_height_slider" min="0" max="1" value="0.7"step="0.01"
									onchange="updateTexture();"
									style="width:45%;vertical-align:top;">
							</td>
							<td align="center">Seed
								 <input type="number" id="terrain_seed" onchange="updateTexture();" style="width:45px;" min="1" value="1" max="1000" />
							</td>
						</tr>
						
						</table>
						<div style="min-height:15px"></div>
						<div>
							Shadow
							<input type="checkbox" onchange="switchTerrainShadow();updateTexture();" checked> 
							<!--<input type="button" value="update" onclick="updateTexture('shadow');"> -->
						</div>
						<div style="min-height:10"></div>

						<table>
						<tr class="suboption_settings">
							<td >Strength
								<input type="range" id="terrain_shadow_strength_slider" min="1" max="100" value="40" step="1"
									onchange="updateTexture( '', '','shadow');"
									style="width:45%;vertical-align:top;">
							</td>
							<td >Height
								<input type="range" id="terrain_shadow_sun_height_slider" min="0" max="100" value="52" step="1"
									onchange="updateTexture('','' ,'shadow');"
									style="width:45%;vertical-align:top;">
							</td>
							
						</tr>


						<!--
						<tr class="suboption_settings">
							<td>
								X
							</td>
							<td colspan=2>
								<input type="range" id="terrain_shadow_xpos_slider" min="-50" max="600" value="-50" step="1"
									onchange="document.getElementById('terrain_shadow_xpos').value = this.value; updateTexture('shadow');"
									style="width:50%;vertical-align:top;">
								<input type="number" id="terrain_shadow_xpos" 
									onchange="document.getElementById('terrain_shadow_xpos_slider').value = this.value; updateTexture('shadow');"
									style="width:52px;" min="-50" value="-50" max="600" step="1"/>
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Y
							</td>
							<td colspan=2>
								<input type="range" id="terrain_shadow_ypos_slider" min="-50" max="600" value="-50" step="1"
									onchange="document.getElementById('terrain_shadow_ypos').value = this.value; updateTexture('shadow');"
									style="width:50%;vertical-align:top;">
								<input type="number" id="terrain_shadow_ypos" 
									onchange="document.getElementById('terrain_shadow_ypos_slider').value = this.value; updateTexture('shadow');"
									style="width:52px;" min="-50" value="-50" max="600" step="1"/>
							</td>
						</tr>-->
						<tr class="suboption_settings">
							<td>
								<p align="right" style="min-width:100px;">Sun Position</p>
							</td>
							<td>
								<canvas id="terrain_shadow_position_canvas" style="float:left;margin-left: 20px;" onclick="updateTexture('', '','shadow');" width="50" height="50"></canvas>
							</td>
						</tr>
						</table>
						<div style="min-height:15"></div>
						<div>
							
							Colored
							<input type="checkbox" onchange="switchTerrainColored();updateTexture();" checked> 
						</div>
						<div class="terrain_gradient_preview"></div>
						<div class="slider_area_terrain">
							<hr class="slider_line_terrain" />
						</div>
					</div>
					
					<!-- Textiles -->
					<div class="type_settings" id="Textiles">
						<table align="center">
							<tr class="option_settings_head">
								<td colspan="3">
									Textiles Settings
								</td>
							</tr>
							
							<tr class="suboption_settings">
								<td>
									Pattern
								</td>
								<td align="center">
									<img class="textiles_pattern" src='./pattern/pat1_preview.png' onclick="textiles_select_pattern(this)" />
									<img src='./pattern/pat1.png' style="display:none" />
									<img class="textiles_pattern" src='./pattern/pat2_preview.png' onclick="textiles_select_pattern(this);" />
									<img src='./pattern/pat2.png' style="display:none" />
									<img class="textiles_pattern" src='./pattern/pat3_preview.png' onclick="textiles_select_pattern(this);" />
									<img src='./pattern/pat3.png' style="display:none" />
									<img class="textiles_pattern_selected" src='./pattern/pat4_preview.png' onclick="textiles_select_pattern(this);" />
									<img src='./pattern/pat4.png' style="display:none" />
									<img class="textiles_pattern" src='./pattern/pat5_preview.png' onclick="textiles_select_pattern(this);" />
									<img src='./pattern/pat5.png' style="display:none" />
									<!--<div style="display:inline-block;" class="colorpicker" id="textiles_bgcolor"></div>-->
								</td>
							</tr>
							
							<tr class="suboption_settings">
								<td>
									Color
								</td>
								<td align="center">
									<div style="display:inline-block;" class="colorpicker" id="textiles_color1"></div>
									<div style="display:inline-block;" class="colorpicker" id="textiles_color2"></div>
									<!--<div style="display:inline-block;" class="colorpicker" id="textiles_bgcolor"></div>-->
								</td>
							</tr>
							<tr class="suboption_settings">
								<td >
									Size
								</td>
								<td align="center" colspan="2">
									Double <input type="checkbox" id="textiles_double" onchange="updateTexture();"> 
								</td>
							</tr>
							<tr class="suboption_settings">
								<td>
									Tightness
								</td>
								<td>
									<input type="range" id="textiles_tightness_slider" min="0" max="1" value="1" step="0.01"
										onchange="document.getElementById('textiles_tightness').value = this.value; updateTexture();"
										oninput=" document.getElementById('textiles_tightness').value = this.value; updateTexture();"
										style="width:50%;vertical-align:top;">
									 <input type="number" id="textiles_tightness" 
									 onchange="document.getElementById('textiles_tightness_slider').value = this.value; updateTexture();"
									 step="0.01" style="width:45px;" min="0" value="1" max="1" />
								</td>
							</tr>
							
							<tr class="suboption_settings">
								<td>
									Thickness
								</td>
								<td>
									<input type="range" id="textiles_thickness_slider" min="1" max="7" value="6" step="1"
										onchange="document.getElementById('textiles_thickness').value = this.value; updateTexture();"
										oninput=" document.getElementById('textiles_thickness').value = this.value; updateTexture();"
										style="width:50%;vertical-align:top;">
									 <input type="number" id="textiles_thickness" 
									 onchange="document.getElementById('textiles_thickness_slider').value = this.value; updateTexture();"
									 step="1" style="width:45px;" min="1" value="6" max="7" />
								</td>
							</tr>

							<tr class="suboption_settings">
								<td>
									Smoothness
								</td>
								<td>
									<input type="range" id="textiles_smoothness_slider" min="0" max="1" value="0" step="0.01"
										onchange="document.getElementById('textiles_smoothness').value = this.value; updateTexture();"
										oninput=" document.getElementById('textiles_smoothness').value = this.value; updateTexture();"
										style="width:50%;vertical-align:top;">
									 <input type="number" id="textiles_smoothness" 
									 onchange="document.getElementById('textiles_smoothness_slider').value = this.value; updateTexture();"
									 step="0.01" style="width:45px;" min="0" value="0" max="1" />
								</td>
							</tr>

							<tr class="suboption_settings">
								<td>
									Shading
								</td>
								<td>
									<input type="range" id="textiles_offset_slider" min="0" max="1" value="0" step="0.01"
										onchange="document.getElementById('textiles_offset').value = this.value; updateTexture();"
										oninput=" document.getElementById('textiles_offset').value = this.value; updateTexture();"
										style="width:50%;vertical-align:top;">
									 <input type="number" id="textiles_offset" 
									 onchange="document.getElementById('textiles_offset_slider').value = this.value; updateTexture();"
									 step="0.01" style="width:45px;" min="0" value="0" max="1" />
								</td>
							</tr>
							<!--<tr class="suboption_settings">
								<td>
									Depth
								</td>
								<td>
									<input type="range" id="textiles_depth_slider" min="0" max="3" value="1" step="0.01"
										onchange="document.getElementById('textiles_depth').value = this.value; updateTexture();"
										oninput=" document.getElementById('textiles_depth').value = this.value; updateTexture();"
										style="width:50%;vertical-align:top;">
									 <input type="number" id="textiles_depth" 
									 onchange="document.getElementById('textiles_depth_slider').value = this.value; updateTexture();"
									 step="0" style="width:45px;" min="-2" value="1" max="3" />
								</td>
							</tr>-->
						</table>
					</div>

					<!-- Tiles -->
					<div class="type_settings" id="Tiles">
						<table align="center">
						<tr class="option_settings_head">
							<td colspan="3">
								Tiles Settings
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Count
							</td>
							<td>
								x <input type="number" id="tiles_x" onchange="updateTexture();" style="width:45px;" min="1" value="2" max="50" />
							</td>
							<td>
								y <input type="number" id="tiles_y" onchange="updateTexture();" style="width:45px;" min="1" value="2" max="50" />
							</td>
							<td>
								<div class="colorpicker" id="tiles_color"></div>
							</td>
						</tr>



						<!-- Gradient for Tiles-->
						<tr class="suboption_settings" >
							<td colspan="2" style="text-align:left">
								<label>
									<input type="checkbox" id="TilesGradient" onchange="enableTilesGradient();" checked> 
									Gradient 
									<script>
										function enableTilesGradient(){
											if($('#TilesGradient').prop('checked')){
									    		$('#tiles_gradient').show();
									    		updateTexture();
									    	}
									    	else{
									    		$('#tiles_gradient').hide();
									    		updateTexture();
									    	}
										};
									</script>
								</label>
							</td>
						</tr>
						<tr class="suboption_settings" id="tiles_gradient">
							<td>
								Size
							</td>
							<td>
								x <input type="number" id="tiles_x_gradient" onchange="updateTexture();" 
								style="width:45px;" min="0" value="30" max="500" />
							</td>
							<td>
								y <input type="number" id="tiles_y_gradient" onchange="updateTexture();" 
								style="width:45px;" min="0" value="30" max="500" />
							</td>
							<td>
								<div class="colorpicker" id="tiles_gradient_color"></div>
							</td>
							</td>
						</tr>



						<!-- Grout -->
						<tr class="suboption_settings">
							<td>
								Grout:
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Size
							</td>
							<td>
								x <input type="number" id="tiles_x_grout" onchange="updateTexture();" 
								style="width:45px;" min="1" value="15" max="100" /></td>
							<td>
								y <input type="number" id="tiles_y_grout" onchange="updateTexture();" 
								style="width:45px;" min="1" value="15" max="100" /></td>
							</td>
							<td>
								<div class="colorpicker" id="grout_color"></div>
							</td>
						</tr>



						<!-- Gradient for Grout -->
						<tr class="suboption_settings" >
							<td colspan="2" style="text-align:left">
								<label>
									<input type="checkbox" id="GroutGradient" onchange="enableGroutGradient();" checked> 
									Gradient 
									<script>
										function enableGroutGradient(){
											if($('#GroutGradient').prop('checked')){
									    		$('#grout_gradient').show();
									    		updateTexture();
									    	}
									    	else{
									    		$('#grout_gradient').hide();
									    		updateTexture();
									    	}
										};
									</script>
								</label>
							</td>
						</tr>
						<tr class="suboption_settings" id="grout_gradient">
							<td></td>
							<td></td>
							<td></td>
							<td>
								<div class="colorpicker" id="grout_gradient_color"></div>
							</td>
						</tr>
						</table>
					</div>
					
					<!-- Wood -->				
					<div class="type_settings" id="Wood">
						<table align="center">
						<tr class="option_settings_head">
							<td colspan="3">
								Wood Settings
							</td>
						</tr>
						<tr class="suboption_settings">
							<td>
								Color
							</td>
							<td align="center">
								<div style="display:inline-block;" class="colorpicker" id="wood_color1"></div>
								<div style="display:inline-block;" class="colorpicker" id="wood_color2"></div>
								<div style="display:inline-block;" class="colorpicker" id="wood_color3"></div>
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Planks
							</td>
							<td>
								<input type="range" id="wood_planks_slider" min="1" max="10" value="5" step="0.1"
									onchange="document.getElementById('wood_planks').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								 <input type="number" id="wood_planks" 
								 onchange="document.getElementById('wood_planks_slider').value = this.value; updateTexture();"
								 step="0.1" style="width:45px;" min="1" value="5" max="10" />
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								X scale
							</td>
							<td>
								<input type="range" id="wood_x_slider" min="1" max="10" value="5" step="0.1"
									onchange="document.getElementById('wood_x').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								 <input type="number" id="wood_x" 
								 onchange="document.getElementById('wood_x_slider').value = this.value; updateTexture();"
								 step="0.1" style="width:45px;" min="1" value="5" max="10" />
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Scale
							</td>
							<td colspan=2>
								<input type="range" id="wood_scale_slider" min="0.2" max="5" value="2" step="0.01"
									onchange="document.getElementById('wood_scale').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="wood_scale" 
									onchange="document.getElementById('wood_scale_slider').value = this.value; updateTexture();"
									style="width:52px;" min="0.2" max="2" value="1" step="0.01"/>
							</td>
						</tr>
												
						<tr class="suboption_settings">
							<td>
								Persistence
							</td>
							<td colspan=2>
								<input type="range" id="wood_detail_slider" min="0" max="1" value="0.5"  step="0.01"
									onchange="document.getElementById('wood_detail').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="wood_detail" 
									onchange="document.getElementById('wood_detail_slider').value = this.value; updateTexture();"
									style="width:45px;" min="0" value="0.5" max="1" step="0.01" />
							</td>
						</tr>
						
						<tr class="suboption_settings">
							<td>
								Seed
							</td>
							<td align="center">
								 <input type="number" id="wood_seed" onchange="updateTexture();" style="width:45px;" min="1" value="1" max="1000" />
							</td>
						</tr>
						
						
						</table>
					</div>
					
				</div>

				<div style="min-height:15"></div>

				<div class="settings">
					<table>
						<tr class="suboption_settings">
							<td>
								Rotation
							</td>
							<td>
								<input type="range" id="rotation_slider" min="0" max="360" value="0"
									onchange="document.getElementById('rotation').value = this.value; updateTexture();"
									oninput=" document.getElementById('rotation').value = this.value; updateTexture();"
									style="width:50%;vertical-align:top;">
								<input type="number" id="rotation" 
									onchange="document.getElementById('rotation_slider').value = this.value; updateTexture();"
									style="width:45px;" min="0" value="0" max="360" />
							</td>
						</tr>
					</table>
				</div>

			</td>
			
		</tr><tr>

		<td style="vertical-align:top;">
			<div style="padding-top:10px; padding-left:20px; display:inline-block; text-align:center;">
				Feedback:<br/>
				<img src="images/email_adresse.png"/><br/>
			</div>
			<div style="padding-top:10px; padding-left:30px; display:inline-block; font-size: 14px; text-align:center;">
				<!-- Dimension
				<select id="img_dimension" onChange="switchIMGDimension();">
					<option value="256">256x256</option>
					<option value="512" selected>512x512</option>
					<option value="1024">1024x1024</option>
				</select>
				<div style="min-height:10px"></div> -->
				<select id="download_dimension" onChange="switchDownloadDimension();">
					<option value="256">Tiny</option>
					<option value="512" selected>Small</option>
					<option value="1024">Normal</option>
					<option value="2048">Big</option>
					<option value="4096">Huge</option>
				</select>
				<div style="display:inline" id="display_download_dimension">512x512</div>
				<div style="min-height:10px"></div>
				<input id="file_name" type="text" size="12">
				<select id="file_type" onChange="switchJPGQual();">
					<option value="png" selected>PNG</option>
					<option value="jpg">JPG</option>
				</select>
				<input id="file_jpg_qual" type="number" step="0.01" min='0.5' max='1' value="0.95" size="4" style="display:none;">
				<div style="min-height:10px"></div>
					<button id="download" class="download" style="width: 8em;  height: 2em;"><b>Download</b></button>
					<!--<img src="images/Download_NormalMap_128.png"/>-->
			</div>
		</td><td align="center">
			If you like this, please
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input type="hidden" name="cmd" value="_donations" />
                <input type="hidden" name="business" value="petry2christian@gmail.com" />
                <input type="hidden" name="item_name" value="TextureGeneratorOnline" />
                <input type="hidden" name="currency_code" value="USD" />
                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
            </form>
		</td>
		</tr></table>
	</div>


	<div style="position: absolute; margin-top: -150px; margin-left: 30px; z-index:-1; color: #111;
	border-radius: 5px; padding: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgba(240,240,240,0.4);">
		Need a NormalMap?<br/>
		<a href="http://cpetry.github.io/NormalMap-Online/">
			<img src="https://cpetry.github.io/NormalMap-Online/images/nmap_logo_trans_small.png" style="padding-top:5px; height: 80px; "/>
		</a>
	</div>
	
</body>
	
	<footer>
		<p>Imprint: Christian Petry, St.Nepomuk-Str. 2a, 97218 Gerbrunn, Germany - 
		
		<a href="http://www.petry-christian.de"> www.petry-christian.de </a>
		</p>
	</footer>

	<!-- Has to be down here! -->
	
	<script src="javascript/extern/blob.js" type="text/javascript" ></script>
	<script src="javascript/extern/canvas-toBlob.js" type="text/javascript" ></script>
	<script src="javascript/extern/filesaver.min.js" type="text/javascript" ></script>

	<script src="javascript/helper.js" type="text/javascript"></script>
	<script src="javascript/helper_vector.js" type="text/javascript"></script>
	<script src="javascript/download.js" type="text/javascript"></script>
	<script src="javascript/noise.js" type="text/javascript"></script>
	<script src="javascript/gaussianblur.js" type="text/javascript"></script>

	<script src="javascript/tex_brick.js" type="text/javascript"></script>
	<script src="javascript/tex_checker.js" type="text/javascript"></script>
	<script src="javascript/tex_clouds.js" type="text/javascript"></script>
	<script src="javascript/tex_gradient.js" type="text/javascript"></script>
	<script src="javascript/tex_perlin_noise.js" type="text/javascript"></script>
	<script src="javascript/tex_terrain.js" type="text/javascript"></script>
	<script src="javascript/tex_textiles.js" type="text/javascript"></script>
	<script src="javascript/tex_tiling.js" type="text/javascript"></script>
	<script src="javascript/tex_wood.js" type="text/javascript"></script>
		
	<script> 
		// initialization		
		showType("type_PerlinNoise");
		//updateTexture();

	</script>

	
</html>
